<template>
    <div class="iinsuranceBox">
        <el-dialog title="保单信息" :visible.sync="dialogInsurance" :before-close="close" width="750px">
            <table>
                    <tr>
                        <td>保单年缴金额</td>
                        <td>
                            <el-input v-model="form.K001.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>保单总缴费期限(传统型)</td>
                        <td>
                            <el-input v-model="form.K002.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>保单总缴费期限(万能型)</td>
                        <td>
                            <el-input v-model="form.K003.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>保单生效时间(月)</td>
                        <td>
                            <el-input v-model="form.K004.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
                    <tr>
                        <td>保单类型</td>
                        <td>
                            <el-select v-model="form.K005.itemValue" class="w240">
                                <el-option label="传统" value="0" />
                                <el-option label="万能" value="1" />
                            </el-select>
                        </td>
                    </tr>
                    <tr>
                        <td>保单当前状态是否再缴状态</td>
                        <td>
                            <el-radio v-model="form.K006.itemValue" label="0">否</el-radio>
                            <el-radio v-model="form.K006.itemValue" label="1">是</el-radio>
                        </td>
                    </tr>
                    <tr>
                        <td>投保人是否有变更</td>
                        <td>
                            <el-radio v-model="form.K007.itemValue" label="0">否</el-radio>
                            <el-radio v-model="form.K007.itemValue" label="1">是</el-radio>
                        </td>
                    </tr>
                    <tr>
                        <td>投保人变更时长（月）</td>
                        <td>
                            <el-input v-model="form.K008.itemValue" placeholder="请输入" size="small" class="w240" />
                        </td>
                    </tr>
            </table>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="submitForm">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { addCustomerInsuranceInfo, getCustomerInsuranceDetailInfo } from "@/api/system/customer";

export default {
    name: "EditCustomer",
    props: ['dialogInsurance','paramsData'],
    data() {
        return {
            productData: {
                cusId: '',
            },

            // 表单校验
            rules: {},
            form: {
                K001:{},
                K002:{},
                K003:{},
                K004:{},
                K005:{},
                K006:{},
                K007:{},
                K008:{},
            },
            dataInfo: [],
            areaList: [],
        };
    },
    created() {
        this.productData.cusId = this.paramsData.cusId;
        this.productData.insuranceId = this.paramsData.insuranceId;
        // 获取详情
        this.getInfo();
    },
    methods: {
        // 获取详情
        getInfo(){
            getCustomerInsuranceDetailInfo(this.productData.insuranceId).then(res => {
                this.productData.insuranceInfos = JSON.parse(JSON.stringify(res.data));
                let proData = res.data;
                for(let i=0;i<proData.length;i++){
                    if(proData[i].cityCode){
                        this.getCityList(2,proData[i].provinceCode,'edit',proData[i].itemCode);
                    }
                    // 区域下拉框多选字符串转数组
                    if(proData[i].areaCode){
                        this.getCityList(3,proData[i].cityCode,'edit',proData[i].itemCode);
                    }
                    this.form[proData[i].itemCode] = proData[i];
                }
            });
        },

        /** 提交按钮 */
        submitForm: function() {
            let that = this;
            let productDetailInfos = [];
            for(let key in this.form){
                let item = this.form;
                let itemValue = item[key].itemValue || '';
                if(key === 'D001'){
                    itemValue = item[key].areaCode;
                }
                productDetailInfos.push(
                    {
                        "cityCode": item[key].cityCode || '',
                        "areaCode": item[key].areaCode || '',
                        "itemValue": itemValue,
                        "itemCode": key || '',
                        "provinceCode": item[key].provinceCode || ''
                    }
                )
            }
            
            this.productData.insuranceInfos = JSON.stringify(productDetailInfos);
            addCustomerInsuranceInfo(this.productData).then(response => {
                if (response.code === 'success') {
                    this.msgSuccess("修改成功");
                    this.close('edit')
                }
            });
        },
        
        /** 关闭按钮 */
        close(type) {
            if(type === 'edit') {
                type = false;
            }
            this.$emit('closeInsurance', type);
        },
        
    }
};
</script>
<style lang="scss">
    .iinsuranceBox{
        padding-top: 10px;
        .w300{
            width: 300px;
        }
        .w200{
            width: 200px;
        }
        .w240{
            width: 240px;
        }
        .w150{
            width: 150px;
        }
        .w180{
            width: 180px;
        }
        .w100{
            width: 100px;
        }
        table{
            margin: 0 auto;
            width: 100%;
        }
        table td {
            overflow: hidden;
            text-overflow: ellipsis;
            color: #606266;
            line-height: 25px;
            font-size: 14px;
            padding: 5px 10px;
            border-bottom: 1px solid #dfe6ec;
        }
        table tr{
            border-bottom: 1px solid #dfe6ec;
        }

        .el-dialog__body{
            max-height: 720px;
            overflow-y: auto;
        }
    }
</style>